<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			* {
				margin:0;
				padding:0;
			}
			.icon_box {
				width:70px;
				height:100px;
				margin:200px auto;
				cursor:pointer;
			}
			.icon_box span {
				width:70px;
				height:6px;
				background:yellowgreen;
				display:block;
				margin-bottom:3px;
				transition:all 1s;
				-webkit-transition:all 1s;
				transform-origin:20px center;
			}
			.icon1 {
				transform:rotate(45deg)!important;
			}
			.icon2 {
				width:0!important;
				margin-left:70px!important;
			}
			.icon3 {
				transform:rotate(-45deg)!important;
			}


		</style>
	</head>
	<body>
		<div class="icon_box">
		    <span></span>
		    <span></span>
		    <span></span>
		</div>
		<script type="text/javascript" src="js/jquery-1.8.3.min.js" ></script>
		<script>
			$(function(){
				var can_click = true;
				$(".icon_box").click(function(event) {
				    if (can_click) {
				        $(".icon_box span").eq(0).addClass("icon1");
				        $(".icon_box span").eq(1).addClass("icon2");
				        $(".icon_box span").eq(2).addClass("icon3");
				        can_click = false;
				    } else {
				        $(".icon_box span").removeAttr('class');
				        can_click = true;
				    }
				})
			})
		</script>
	</body>
</html>
